<template>
  <view>
    <!-- 标题栏：已预约 -->
    <uni-section titleFontSize="15px" title="已预约" type="line"></uni-section>
 
    <uni-list>
      <uni-list-item :title="`${item.name}`" :note="`${item.type}\n手机号：${item.phoneNumber}\n${item.address}`"
        :rightText="`预约日期：${item.orderDate}\n预约开始时间：${item.orderStartDate}\n预约结束时间：${item.orderEndDate}`" link
        v-for="(item,index) in sportsList" :key="index">
        <template v-slot:header>
          <view class="display-default" style="font-size: 12px;padding-right: 20rpx;"
            :style="{color:item.styleColor}">{{item.status}}</view> 
          <!-- <view class="display-default" style="font-size: 12px;padding-right: 20rpx;color: red;">进行中</view> -->
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        sportsList: [],
        token: ''
      };
    },
    async onLoad() {
      this.token = await uni.getStorageSync('token')

      await this.getSportsOrderByUid(this.token)
    },
    methods: {
      /**
       * @description 根据学生uid查询已预约的记录信息
       * @param token 请求头token参数
       */
      async getSportsOrderByUid(token) {
        await this.$http.sports.getSportsOrderByUidInfo(token).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          for (let i = 0; i < res.data.length; i++) {
            if (new Date(res.data[i].orderDate + ' ' + res.data[i].orderStartDate) > new Date()) {
              res.data[i].status = '未开始'
              res.data[i].styleColor = 'blue'
            } else if (new Date(res.data[i].orderDate + ' ' + res.data[i].orderEndDate) < new Date()) {
              res.data[i].status = '已完成'
              res.data[i].styleColor = 'green'
            } else {
              res.data[i].status = '进行中'
              res.data[i].styleColor = 'red'
            }
          }
          this.sportsList = res.data
          console.log("this.sportsList: " + JSON.stringify(this.sportsList));
          this.$forceUpdate()
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      }
    }
  }
</script>

<style lang="scss">
  // 自定义标题样式
  /deep/ .uni-section .uni-section-header__decoration {
    background-color: red !important;
  }
</style>
